<div id="user_manage">
	<div class="user_manage">
		<el-row class="table_search">
			<el-col :span="24">
				<template>
					<el-input
							placeholder="请输入用户名进行搜索"
							v-model.trim="parameters.inputVar"
							clearable>
					</el-input>
					<el-select v-model="parameters.corpId" clearable filterable placeholder="请选择商户" style="width:230px;">
						<el-option
								v-for="item in merchantList"
								:key="item.corpId"
								:label="item.corpName"
								:value="item.corpId">
						</el-option>
					</el-select>
					<el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
				</template>
				<el-button class="add-manager" type="primary" @click="addUser" icon="el-icon-plus">新增管理员</el-button>
			</el-col>
		</el-row>

		<!--<el-row class="table_btn">-->
			<!--<el-col :span="24" class="text-r">-->
				<!--<el-button type="primary" @click="addUser" icon="el-icon-plus">新增管理员</el-button>-->
			<!--</el-col>-->
		<!--</el-row>-->
		<template>
			<el-table
					size="mini"
					@row-click="goUserDetails"
					@cell-mouse-enter="userMouseEnterEvent"
					:data="tableData"
					style="width: 100%">
				<el-table-column
						align="center"
						prop="usercode"
						label="用户账号"
						width="190">
				</el-table-column>
				<el-table-column
						align="center"
						prop="nickname"
						label="用户名"
						width="190">
				</el-table-column>
				<el-table-column
						align="center"
						width="190"
						prop="corpName"
						label="所属商户">
				</el-table-column>
				<el-table-column
						align="center"
						width="190"
						prop="status"
						label="用户状态">
					<template slot-scope="scope">
						<el-switch
								v-model="scope.row.status"
								@change="changeType(scope.$index, scope.row)"
								active-text="可用"
								active-value="02"
								inactive-value="03"
								inactive-text="禁用"
								active-color="#13ce66"
								inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="danger"  size="mini" @click="resetMima(scope.$index, scope.row)">重置密码</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="block footerBox">
				<el-pagination
						background
						@current-change="handleCurrentChange"
						layout="prev, pager, next"
						:current-page.sync="currentPage"
						:total="totalCount">
				</el-pagination>
			</div>
		</template>

	</div>
	<!--新增弹出框-->
	<el-dialog title="新增商户管理员" :visible.sync="dialogAddFormVisible" class="edit_dialog" ModelAttribute="SysUser">
		<el-form
				class="edit-template-form"
				ref="addForm"
				:model="addForm"
				label-width="140px"
				:label-position="labelPosition">
			<el-form-item label="所属商户" prop="corpId" >
				<!--<el-input type="" v-model="form.cityId"></el-input>-->
				<el-select v-model="addForm.corpId" filterable placeholder="请选择" style="width: 60%;">
					<el-option
							v-for="item in merchantList"
							:key="item.corpId"
							:label="item.corpName"
							:value="item.corpId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="请输入用户姓名：" prop="name">
				<el-input v-model="addForm.add_nick_name" style="width: 60%;"></el-input>
			</el-form-item>

			<el-form-item label="请输入手机号码：" prop="name" class="phoneNumBox">
				<el-input v-model="addForm.add_user_phone" style="width: 60%;"></el-input>
			</el-form-item>

			<el-form-item label="请输入邮箱：" prop="name" class="emailBox">
				<el-input v-model="addForm.add_user_emain" style="width: 60%;"></el-input>
			</el-form-item>
			<!--按钮模板-->
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogAddFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="sendAddData">确 定</el-button>
		</div>
	</el-dialog>

	<!--详情页单出框-->
	<el-dialog title="用户详情" :visible.sync="dialogDetailsFormVisible" class="dialogDetails">
		<div class="info-template-content">
			<el-row class="item-row">
				<el-col :span="4" style="color: #666;text-align: right">用户账号：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.usercode}}</el-col>
			</el-row>
			<el-row class="item-row">
				<el-col :span="4" style="color: #666;text-align: right">用户姓名：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.nickname}}</el-col>
			</el-row>
<!--
			<el-row class="item-row">
				<el-col :span="4" style="color: #666;text-align: right">用户角色：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.roleName}}</el-col>
			</el-row>-->
			<el-row class="item-row" >
				<el-col :span="4" style="color: #666;text-align: right">手机号码：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.phone}}</el-col>
			</el-row>
			<el-row class="item-row">
				<el-col :span="4" style="color: #666;text-align: right">邮箱：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.email}}</el-col>
			</el-row>
			<el-row class="item-row">
				<el-col :span="4" style="color: #666;text-align: right">状态：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.status}}</el-col>
			</el-row>
			<el-row class="item-row">
				<el-col :span="4" style="color: #666;text-align: right">所属单位：</el-col>
				<el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.corpName}}</el-col>
			</el-row>

		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogDetailsFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="dialogDetailsFormVisible = false">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
</html>
<!--[if IE]>
<script>
	goIEPage(IEVersion(),'${basePath}//merchant_manager_list_IE');
</script>
<![endif]-->

<!--[if !IE]><!-->
<script>
	//新增弹出框树状结构addSetting   addCitySel  addCitySel  addMenuContent
	var addSetting = {
		check: {
			enable: true,
			chkStyle: "checkbox",
			chkboxType: { "Y": "ps", "N": "ps" }
		},
		data: {
			simpleData: {
				enable: true,
				rootPId: 0
			}
		},
		callback: {
			beforeClick: addBeforeClick,
			onCheck: addOnCheck
		}
	};
	var zNodes1 = [];
	function addBeforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("addTreeDemo123");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}
	var totalNodes;
	function addOnCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("addTreeDemo123"),
				nodes1 = zTree.getCheckedNodes(true),
				selAll = [],
				v = "";
		for (var i=0, l=nodes1.length; i<l; i++) {
			v += nodes1[i].name + ",";
			if(!nodes1[i].isParent){
				selAll.push(nodes1[i].id)
			}
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		var cityObj1 = $("#addCitySel");
		cityObj1.attr("value", v);
		totalNodes = selAll;

	}

	function addHideMenu() {
		$("#addMenuContent").fadeOut("fast");
		$("body").unbind("mousedown", addOnBodyDown);
	}
	function addOnBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "addCitySel" || event.target.id == "addMenuContent" || $(event.target).parents("#addMenuContent").length>0)) {
			addHideMenu();
		}
	}
	//新增弹出框树结构结束
	//编辑弹出框树结构开始
	var setting = {
		check: {
			enable: true,
			chkStyle: "checkbox",
			chkboxType: { "Y": "p", "N": "s" }
		},
		data: {
			simpleData: {
				enable: true,
				rootPId: 0
			}
		},
		callback: {
			beforeClick: beforeClick,
			onCheck: onCheck
		}
	};
	var zNodes = [];
	function beforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo123");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}
	var totalNodes2;
	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo123"),
				nodes = zTree.getCheckedNodes(true),
				selAll1=[],
				v = "";
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].name + ",";
			if(!nodes[i].isParent){
				selAll1.push(nodes[i].id)
			}
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		var cityObj = $("#citySel");
		cityObj.attr("value", v);
		totalNodes2 = selAll1;
	}

	function showMenu() {
		var cityObj = $("#citySel");
		var cityOffset = $("#citySel").offset();
		$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

		$.post("${basePath}merchant/dept/togetDeptTree", function (json) {
			var treeObj = $.fn.zTree.init($("#treeDemo123"), setting, json.t);
			//默认展开所有节点
			//treeObj.expandAll(true);
		});
		//$.fn.zTree.init($("#treeDemo123"), setting, zNodes);
		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
	//编辑弹出框  树结构结束
	var user_manage =
			new Vue({
				el: "#user_manage",
				data: {
					// inputVar: '',
					merchantList:'',
					tableData:[],
					roleData:[],
					currentPage: 1,
					pageSize:10,
					labelPosition:'left',
					dialogAddFormVisible: false,
					corpId:'',
					addForm: {                          //增加用户数据
						corpId:'',
						add_nick_name:'',
//						add_user_name:'',
						add_user_phone:'',
						add_user_emain:'',
					},
					formLabelWidth: 'auto',
					dialogEditFormVisible: false,
					dialogDetailsFormVisible: false,
					detailsForm: {
						corpName:'',
						usercode:'',
						nickname:'',
						phone: '',
						roleName: '',
						status: '',
						email: ''
					},
					formLabelWidth: '120px',
					totalCount:'',
					totalPage:'',
					parameters:{
						orgIds:'',
						corpId:'',//过滤条件
						corpIds:'',//总过滤条件
						status:'',
						currentPage:'',
						inputVar: '',
						search:'1',
						system:'02',
						type:'01'
					},
					currentPage: 1,
					pageSize:10
				},
				methods: {
					changeType:function(index, row){
						var url = "${basePath}bank/user/changeType";
						var options = {
							'usercode': row.usercode,
							'status': row.status
						};
						sendService(url, options, function (resData) {
						    console.log(options.status)
							if (resData.status == 'success') {
								user_manage.$message.success("操作成功");
							} else {
								user_manage.$message.error("操作失败！请联系管理员！");
							}
						});
						return true;
					},
					/**
					 * 增加用户  发送数据给后台
					 */
					sendAddData:function () {
						var that = this;
						this.dialogAddFormVisible = false;
						var arr1 = new Array();
						if(totalNodes){
							var arr1Str = totalNodes.join(',');
						}
						var option6= {
							corpId:this.addForm.corpId,
							nickname:this.addForm.add_nick_name,
							email:this.addForm.add_user_emain,
							phone:this.addForm.add_user_phone
						};
						sendService('${basePath}bank/merchant/saveMercantManager', option6, function (resData) {
							that.$message({
								type: 'success',
								message: '新增成功!'
							});
							if(resData.status == 'success'){
								reloadPage('${basePath}bank/merchantManager');
							}
						})

					},
					goPage: function (url) {
						window.location.href= '${basePath}'+url;
					},
					handleSizeChange: function (size) {
						this.pageSize = size;
					},
					handleCurrentChange: function(currentPage){
//                    this.currentPage = currentPage;
						Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,currentPage,function (resData) {
							if(resData.status == 'success'){
								this.tableData = resData.t;
							}
						});
					},
					/**
					 * 前往用户详情页面
					 * @param row
					 * @param event
					 * @param column
					 */
					goUserDetails:function(row, event, column){
						if(column.label != '操作'&&column.label != '用户状态'){
//                        $(".main-right").empty();
//                        $(".main-right").load('${basePath}merchant/user/toUserDetial');
							this.dialogDetailsFormVisible = true;
							this.detailsForm.usercode = row.usercode;
							this.detailsForm.nickname=row.nickname;
							this.detailsForm.phone= row.phone;
							this.detailsForm.corpName= row.corpName;
							this.detailsForm.status= this.getStatus(row);
							this.detailsForm.email= row.email;
						}
						if(column.label == '操作'|| column.label == '用户状态'){
							return
						}
					},
					userMouseEnterEvent:function(row, event, column){
						if(event.label == '操作'){
							column.style.cursor="default"
						}
						if(event.label != '操作'){
							column.style.cursor="pointer"
						}
					},
					searchFun:function(){
						Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,1,function (resData) {
							if(resData.status == 'success'){
								//this.tableData = resData.t;
								//console.log(resData)
							}
						});
					},
					addUser:function(){
						this.dialogAddFormVisible = true;
						this.addForm.selRole='';
						this.addForm.add_user_role='';
						this.addForm.add_nick_name='';
//						this.addForm.add_user_name='';
						this.addForm.add_user_phone='';
						this.addForm.add_user_emain='';
					},
					/**
					 * 重置密码 函数
					 * @param index
					 * @param row
					 */
					resetMima:function(index, row) {
						var that = this;
						this.$confirm('确认要重置密码吗？','提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(function () {
							var option3= {nickname:row.nickname,userid:row.userid};
							sendService('${basePath}/system/user/updatePassword', option3, function (resData) {
								if(resData.status == 'success'){
									that.$message({
										type: 'success',
										message: '重置成功!'
									});
								}else{
									that.$message({
										type: 'failure',
										message:resData.msg
									});
								}
							})
						}).catch(function () {
							that.$message({
								type: 'info',
								message: '取消重置'
							});
						})

					},
					/**
					 * 格式化用户状态函数
					 * @param row
					 * @param column
					 * @returns {*}
					 */
					getStatus:function(row){
						var status = row.status;
						if(status == '01'){
							return '未审核'
						}else if(status == '02'){
							return '正常'
						}else if(status == '03'){
							return '禁用'
						}else {
							return ''
						}
					},
					handleChange:function(value) {
						console.log(value);
					}
				},
				created: function () {
					//本模块为银行端商户管理员管理
					this.parameters.system='02';//商户端人员
					this.parameters.type='01';//超级管理员
					sendService("${basePath}bank/org/getUserSelectOrgTree", null, function (resData) {
 						if(null != resData.t){
							user_manage.parameters.orgIds = getChildrenId(resData.t);

							//获取所有商户
							sendService('${basePath}bank/getAllMerchantList', {orgIds:user_manage.parameters.orgIds}, function (resData) {
								if(resData.status == 'success'){
									user_manage.merchantList = resData.t;
									user_manage.merchantList.forEach(function (item) {
										user_manage.parameters.corpIds = user_manage.parameters.corpIds+item.corpId + ",";
									});
									Pagesearch(user_manage,'${basePath}/merchant/user/getUserlistPage', null,1,function (resData1) {

									});
								}
							});

						}
					});
				}


			});

	function getChildrenId(children){
		var str = "";
		if (children != null){
			children.forEach(function (item) {
				str = str + item.id + ",";
				var child = item.children;
				if(child != null){
					str = str + getChildrenId(child) ;
				}
			});
		}
		return str;
	}
</script>
<!--<![endif]-->
<style scoped>
	.el-table__header,.el-table__body{
		width: 100% !important;
	}
	.el-table tr{
		height: 40px;
	}
	.addUsrtBtn{
		padding: 9px 15px;
		font-size: 12px;
	}
	/*table按钮样式调整开始*/
	.el-button--mini, .el-button--mini.is-round{
		padding: 4px 10px;
	}
	.userManageBox .editBtn{
		color: #409EFF;
		background-color: transparent;
		border-color: transparent;
	}
	.userManageBox .editBtn:hover{
		color: #fff;
		background-color: #409EFF;
		border-color: #409EFF;
	}

	.userManageBox .delBtn{
		color: #fa5555;
		background-color: transparent;
		border-color: transparent;
	}
	.userManageBox .delBtn:hover{
		color: #fff;
		background-color: #fa5555;
		border-color: #fa5555;
	}
	.userManageBox .resetBtn{
		color: #02dda7;
		background-color: transparent;
		border-color: transparent;
	}
	.userManageBox .resetBtn:hover{
		color: #fff;
		background-color: #02dda7;
		border-color: #02dda7;
	}
	.userManageBox .el-button{
		margin-left: 0;
	}
	/*table按钮样式调整结束*/
	.table_search, .table_btn{
		height: 60px;
		margin-bottom: 10px;
		background: #fff;
		padding: 10px 20px 30px;
	}
	/*.el-table td, .el-table th.is-leaf{*/
	/*border: none;*/
	/*}*/
	.el-table::before{
		height: 0;
	}
	.addUserBox{
		margin-bottom: 0;
		border-bottom: 1px solid #f2f4f8;
	}
	.el-input{
		width: auto;
	}
	.text-r{
		text-align: left;
	}
	.footerBox {
		width: 100%;
		height: 50px;
		background-color: #fff;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding-top: 9px;
		text-align: right;
	}

	.add-template-form > div{
		margin-left: 45px;
	}
	.el-dialog__header span{
		padding-left: 20px;
	}
	#menuContent{
		left: 0 !important;
		top: 40px !important;
		background-color: #eee;
		border: 1px solid #ccc;
	}
	.edit-template-form > div{
		margin-left: 45px;
	}
	/*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
	/*content: '';*/
	/*}*/
	#addMenuContent{
		left: 0 !important;
		top: 40px !important;
		background-color: #eee;
		border: 1px solid #ccc;
	}


	.dialogDetails .topNav{
		margin-left: 30px;
		margin-bottom: 20px;
	}
	.dialogDetails .title-template{
		height: 60px;
		line-height: 60px;
		font-size: 18px;
		padding-left: 30px;
		margin-bottom: 10px;
		color: #333333;
		background: #ffffff;
	}

	.dialogDetails .info-template-content{
		background: #ffffff;
	}
	.dialogDetails .item-row{
		height: 46px;
		line-height: 46px;
		font-size: 16px;
		padding-left: 100px;
	}
	.dialogDetails .item-row div:first-of-type{
		color: #aaa;
		text-align: left
	}
	.dialogDetails .item-row div:last-of-type{
		color: #333;
		padding-left: 80px
	}

	.dialogDetails .info-template-content .el-row:nth-child(even){
		background-color: #F8F9FB;
	}
	.dialogDetails .info-template-content .el-row:last-of-type{
		margin-bottom: 30px;
	}
	.dialogDetails .el-dialog{
		overflow: hidden;
		-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
		box-shadow: 0 0 16px rgba(0,0,0,0.5);
	}


	.el-dialog__header{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(255,68,68,1);
		width: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
		background-color: #fff;
	}
	.el-dialog__headerbtn .el-dialog__close{
		color: #aaa;
		font-size: 22px;

	}
	.el-dialog__body{
		padding-top: 75px;
	}
	.dialogDetails .el-dialog__body{
		padding: 50px 0 0 0 ;
	}
	.errorBox{
		color: #fa5555;
		font-size: 12px;
		line-height: 1;
		padding-top: 4px;
		position: absolute;
		top: 100%;
		left: 0;
	}
	.errorBox2333{
		color: #fa5555;
		font-size: 12px;
	}
	/*#selManage label{*/
	/*position: relative;*/
	/*}*/
	#selManage label:before{
		content: '*';
		color: #fa5555;
		margin-right: 4px;

	}
	.add-manager{
		position: absolute;
		right:110px;
	}
</style>
